<template>
  <div>
    <FilterList>
      <div style="float: right;">
        <el-button style="padding-left: 10px" type="primary" @click="addPage">页面添加</el-button>
        <el-button style="padding-left: 10px" type="primary" @click="addDialog">弹窗添加</el-button>
        <el-button style="padding-left: 10px" type="primary" @click="select">选择</el-button>
      </div>
    </FilterList>
    <el-dialog title="弹窗新增Demo" v-model="addDialogVisible">
      <FormDemo :saveCallBack="save" :cancelCallBack="cancel"></FormDemo>
    </el-dialog>
    <el-dialog title="表格选择Demo" v-model="selectDialogVisible" size="large">
      <FilterList :isSelect="true" selectMode="single" :selected="[{id: 1, name: 'aaa'}]" :selectSaveCallBack="selectSave" :selectCancelCallBack="selectCancel"></FilterList>
    </el-dialog>
  </div>
</template>
<script>
  import FormDemo from '@/pages/list/FormDemo.vue'
  import FilterList from '@/components/FilterList.vue'
  export default {
    components: {
      FormDemo,
      FilterList
    },
    data () {
      return {
        addDialogVisible: false,
        selectDialogVisible: false
      }
    },
    methods: {
      addPage () {
        this.openMenu('addDemo', '新增页面', 'FormDemo')
      },
      addDialog () {
        this.addDialogVisible = true
      },
      save () {
        this.addDialogVisible = false
      },
      cancel () {
        this.addDialogVisible = false
      },
      select () {
        this.selectDialogVisible = true
      },
      selectSave (list) {
        this.selectDialogVisible = false
      },
      selectCancel () {
        this.selectDialogVisible = false
      }
    }
  }
</script>
<style>
</style>
